<template>
  <div>
    <div ref="quillEditor" :id="props.id"></div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onUnmounted} from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

interface SeaEditor {
    // dom 元素 ID',  '需要相对于全局唯一
    id?: string;
    // 内容
    content?: string;
    // 只读
    readonly?: boolean;
}

const props = withDefaults(defineProps<SeaEditor>(), {
    id: 'sea_editor', readonly: false, content: ''
})


// 按钮标题
const title_config = {
    'ql-bold': '加粗',
    'ql-color': '颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
};

let dom = undefined;

onMounted(() => {
    dom = document.getElementById(props.id);
    const quill = new Quill(dom, {
        modules: {
            toolbar: [
                // 加粗 斜体 下划线 删除线
                ["bold", "italic", "underline", "strike"]
                // 引用  代码块
                , ["blockquote", "code-block"]
                // 有序、无序列表
                , [{list: "ordered"}, {list: "bullet"}]
                // 缩进
                , [{indent: "-1"}, {indent: "+1"}]
                // 字体大小
                , [{size: ["small", false, "large", "huge"]}]
                // 标题
                , [{header: [1, 2, 3, 4, 5, 6, false]}]
                // 字体颜色、字体背景颜色
                , [{color: []}, {background: []}]
                // 对齐方式
                , [{align: []}]
                // 清除文本格式
                , ["clean"]
                // 链接、图片、视频
                // , ["link", "image", "video"]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });


    // 直接操作 dom，增加 title 字段
    const toolbar = document.querySelector('.ql-toolbar');
    const buttons = toolbar.querySelectorAll('button');
    const selects = toolbar.querySelectorAll('select');

    buttons.forEach(function (item) {
        if (item.className === 'ql-script') {
            item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
            item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else {
            item.title = title_config[item.classList[0]];
        }
    });

    selects.forEach(function (item) {
        item.parentNode.title = title_config[item.classList[0]];
    });

});

onUnmounted(() => {
    dom.remove();
})

</script>